<script setup lang="ts" name="App">

import { ref, reactive,toRefs,toRef } from 'vue'

const user = reactive({
  name: 'jshand',
  age: 18,

})



/**
 * ES6 结构语法
 * const person = {name:'张飞',addres:18}
// const name = person.name
// const addres = person.addres
const {name,addres} = person
 */
// const age = user.age



// let age = toRef(user,'age')
// let name = toRef(user,'name')


//将响应式对象里面的 属性变成响应式
const {name, age} = toRefs(user)






function changeAge() {
  user.age += 1
}


</script>

<template>


  <div>
    人员的信息name:{{ user.name }} age:{{ age }} <br>
  </div>

  <div>
    <button @click="changeAge">修改年龄</button>
  </div>

</template>

<style scoped></style>
